<template>
  <el-table :data="carList">
    <el-table-column prop="id" label="序号" align="center" />
    <el-table-column prop="title" label="名称" align="center" />
    <el-table-column prop="price" label="价格" align="center" />
    <el-table-column prop="number" label="数量" align="center" />
  </el-table>
  <div v-if="carList.length">
    <h1>商品总价是:{{ totalPrice }}</h1>
    <el-button type="primary" @click="clearCar">结算商品</el-button>
  </div>
</template>

<script setup>
import { useShoppingCarStore } from '../stores/shoppingCar'
import { storeToRefs } from 'pinia'
const { carList, totalPrice } = storeToRefs(useShoppingCarStore())
const { clearCar } = useShoppingCarStore()

</script>

<style scoped></style>
